<template>
	<view class="content">
		<headBar :toTitle="'订单详情'"></headBar>
		<view style="position: fixed;top:0;background: #F4F5F9;z-index: -2;width:100%;height:100vh;"></view>
		<image class="bg-img" src="@/static/bgx.png"></image>

		<div style="display: flex;align-items: center;padding: 12px;">
			<image class="odicon" v-if="form.status==2||form.status==4" src="/static/images/timeline.png"></image>
			<image class="odicon" v-if="form.status==3||form.status==5||form.status==7" src="/static/images/dui.png">
			</image>
			<div style="font-size:18px;font-weight: 500;">
				<span v-if="form.status==2">待到加油站使用</span>
				<span v-if="form.status==1">未支付</span>
				<span v-if="form.status==3">已完成</span>
				<span v-if="form.status==4">退款审核中</span>
				<span v-if="form.status==6">退款失败</span>
				<span v-if="form.status==5">退款通过</span>
				<span v-if="form.status==7">退款成功</span>
			</div>
		</div>
		<!-- v-if="form.status==4||form.status==5||form.status==6||form.status==7" -->
		<div class="baseCon" v-if="form.status==4||form.status==5||form.status==6||form.status==7">
			<div class="zflex zcenter" @click="goPage('/pages/order/backprogress?id=' + eId)">
				<div style="margin-right: auto;">
					<div class="zflex zcenter" style="margin-bottom: 8px;">
						<image src="/static/images/money.png" class="odicon"></image>
						<div style="font-weight: 500;font-size: 17px;">退款进度</div>
					</div>
					<div style="color: #83878E;margin-left: 32px;">申请退款，等待加油站审核</div>
				</div>
				<u-icon name="arrow-right" color="#939BAB" size="18"></u-icon>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="zflex">
				<image class="oilImg" src="/static/images/oilImg.png"></image>
				<div style="width: calc(100% - 60px);">
					<div class="zflex">
						<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{form.oilName}}</div>
						<div style="font-size: 15px;color: #ff6c1e;font-weight: 500;">¥{{form.actualPayment}}</div>
					</div>
					<div><span class="oil-tl">价格：</span><span class="oil-tr">¥{{form.discountPrice}}</span></div>
					<div><span class="oil-tl">数量：</span><span class="oil-tr">约{{form.refueleQuantity}}L/kg</span></div>
				</div>
			</div>

			<div class="zline"></div>

			<div v-if="form.status==2">
				<div style="text-align: center;margin-top: 20px;">
					<tki-qrcode v-if="ewmData.ifShow" cid="qrcode2" ref="qrcode2" :val="ewmData.val"
						:size="ewmData.size" :onval="ewmData.onval" :loadMake="ewmData.loadMake"
						:usingComponents="true" />
					<div style="margin-top: 12px;color: #83878E;"><uni-icons type="refreshempty" size="18"
							color="#83878E" @click="refishEwm"></uni-icons>每30s自动刷新，请在加油时出示</div>
				</div>
				<div class="bh-box">
					<div style="margin-right: auto;font-size: 13px;width: 500rpx;">
						订单编号：{{form.orderNo}}</div>
					<div class="zflex" style="align-items: center;" @click="copy(form.orderNo)">
						<image class="copyImg" src="/static/images/copy.png"></image>
						<div class="copyTxt">复制</div>
					</div>
				</div>
			</div>
			<div v-if="form.status==4||form.status==5||form.status==6||form.status==7">
				<div class="zflex">
					<div class="zleft">退款原因</div>
					<div class="zrigt">{{form.refundReason}}</div>
				</div>
				<div style="color:#83878E;margin:6px 0;">详情：{{form.refundRemark}}</div>
				<div class="zflex">
					<div class="zleft">退款金额</div>
					<div class="zrigt">¥{{form.actualPayment}}</div>
				</div>

				<div class="btnKong" v-if="form.status==4" @click="cheShen" style="margin-top: 18px;">撤销退款申请</div>
			</div>
		</div>


		<div class="baseCon" style="margin-top: 12px;">
			<div class="item-title">{{form.oilStationName}}</div>
			<div class="same-w" style="margin-top: 6px;">
				<span style="color: #83878E;font-size: 12px;">营业中&nbsp;&nbsp;&nbsp;{{form.openTime}}</span>
			</div>
			<div class="zline"></div>

			<div class="same-w">
				<div class="same-lef" style="width: 460rpx;">
					<div style="font-size: 13px;">鄂尔多斯市东胜区巴音门克街道</div>
					<div style="font-size:12px;color: #83878E;margin-top: 4px;">距你 {{form.distance}}km</div>
				</div>
				<div class="zflex" style="justify-content: center;">
					<div style="text-align: center;margin-right: 8px;" @click="openArea(form.latitude,form.longitude)">
						<image class="roundImg" src="/static/images/area.png"></image>
						<div class="roundtxt">导航</div>
					</div>
					<div style="text-align: center;" @click="callKefu()">
						<image class="roundImg" src="/static/images/call.png"></image>
						<div class="roundtxt">电话</div>
					</div>
				</div>
			</div>
		</div>

		<div class="baseCon" style="margin-top: 12px;">
			<div class="item-title">订单信息</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">订单编号</div>
				<div class="detail-rig">{{form.orderNo}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;">
				<div class="detail-lef">下单时间</div>
				<div class="detail-rig">{{form.gmtCreate}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;"
				v-if="form.status==3||form.status==4||form.status==5||form.status==6||form.status==7">
				<div class="detail-lef">支付时间</div>
				<div class="detail-rig">{{form.payDate}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;"
				v-if="form.status==3||form.status==4||form.status==5||form.status==6||form.status==7">
				<div class="detail-lef">支付方式</div>
				<div class="detail-rig">{{form.payTypeName}}</div>
			</div>
			<div class="same-w" style="margin-top: 6px;" v-if="form.status==3">
				<div class="detail-lef">使用时间</div>
				<div class="detail-rig">{{form.useDate}}</div>
			</div>
		</div>
		<div style="height: 100px;"></div>
		<!--  -->
		<div class="fix-bom" v-if="form.status==2||form.status==3">
			<div class="btnKong btnKong2" @click="goPage('/pages/order/backMoney?id='+ eId)">申请退款</div>
		</div>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import headBar from '@/components/headerBar/headBar.vue'
	// #endif
	// #ifdef H5
	import headBar from '@/components/headerBar/kongbai.vue'
	// #endif
	import {
		detailsDriver,
		revokeRefundDriver,
		refreshCode,
	} from '@/request/api.js'
	import {
		copyText
	} from "@/utils/common.js"
	export default {
		components: {
			headBar
		},
		data() {
			return {
				eId: null,
				form: {},
				ewmData: {
					val: '123123',
					ifShow: true,
					size: 300, // 二维码大小
					onval: true, // val值变化时自动重新生成二维码
					loadMake: true, // 组件加载完成后自动生成二维码
				},
				timer: null,
				lat: '',
				lon: '',
			}
		},
		mounted() {
			this.startTimer()
			//this.open()
		},
		onLoad(e) {
			this.eId = e.id
			this.getDetail()
			this.getarea()
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onShow() {

		},
		methods: {
			startTimer() {
				this.timer = setInterval(() => {
					refreshCode(this.eId).then(res => {
						this.ewmData.val = res.data
					})
				}, 30000)
			},
			refishEwm() {
				refreshCode(this.eId).then(res => {
					this.ewmData.val = res.data
				})
			},
			getarea() {
				const that = this
				uni.getLocation({
					type: 'wgs84', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: function(res) {
						that.lat = res.latitude
						that.lon = res.longitude
						that.getDetail()
					},
					fail: function(err) {
						that.getDetail()
					}
				})
			},
			getDetail() {
				let data = {
					id: this.eId,
					latitude: this.lat,
					longitude: this.lon
				}
				detailsDriver(data).then(res => {
					this.form = res.data
					this.ewmData.val = res.data.verificationCode
				})
			},

			openArea(lat, lon) {
				uni.openLocation({
					latitude: lat,
					longitude: lon,
					success: function(res) {

					}
				});
			},

			callKefu() {
				const phone = getApp().globalData.kefuPhone
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {

					}
				})
			},

			cheShen() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '是否撤销退款申请？',
					success: function(res) {
						if (res.confirm) {
							revokeRefundDriver({
								id: that.eId
							}).then(msg => {
								that.getDetail()
							})
						}
					}
				});
			},

			copy(e) {
				copyText(e)
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},


		}
	}
</script>

<style scoped>

</style>